---
import Footer from "../components/footer/footer.astro";
import LeftSidebar from "../components/navigation/leftSidebar.astro";
import Navbar from "../components/navigation/navbar.astro";

import "../styles/global.css";
import "../styles/algolia/style.css";
import "../styles/accessibility.css";

import HeadCommon from "../components/headCommon.astro";
import HeadSeo from "../components/headSeo.astro";
import { SITE } from "../config";

import "@fontsource-variable/inter";

import JumpToContent from "../components/accessibility/jumpToContent.astro";

export interface Props {
  isNotFound?: boolean;
}

const currentPage = Astro.url.pathname;

const { isNotFound } = Astro.props;
---

<!doctype html>
<html dir="ltr" lang="en-us" class={`initial ${isNotFound ? "not-found" : ""}`}>
  <head>
    <HeadCommon />
    <HeadSeo type="website" />
    <title>{SITE.title}</title>

    <script is:inline>
      const html = document.documentElement;
      if (
        window.location.pathname === "/" ||
        html.classList.contains("not-found")
      ) {
        html.classList.remove("not-found");
        html.classList.add("dark");
      }
    </script>
  </head>
  <body
    class="min-h-screen bg-gradient-to-b from-gray-900 via-[#300171] to-slate-900"
  >
    <JumpToContent />
    <div
      class="relative before:pointer-events-none before:absolute before:inset-0 before:block before:h-full before:w-full before:bg-[url('/images/background-pattern.svg')] before:bg-cover before:bg-no-repeat before:opacity-5"
    >
      <Navbar isNotFound={isNotFound || false} />
      <aside id="grid-left" class="hidden" title="Site Navigation">
        <div class="fixed left-0 top-0 z-30 h-screen w-screen bg-default">
          <div class="fixed top-24 h-[calc(100%-96px)] w-full pb-16">
            <LeftSidebar
              currentPage={currentPage}
              isNotFound={isNotFound || false}
            />
          </div>
        </div>
      </aside>
      <main id="content">
        <slot />
      </main>
      <Footer isBlog={false} path="/" />
    </div>
  </body>
</html>
